<template>
    <div>
        <div v-for="(comment,index) in commentList" :key="index" >
        <div style="display: flex; gap: 0.75em; padding: 1em 0px;">
            <img :src="comment.img ||comment.image|| 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt=""
                style="width: 40px; height: 40px; border-radius: 50%; ">
            <div style="flex:1 1 0%">
                <div style="display: flex; align-items: center; gap: 0.75em;">
                    <div style="font-weight: 500; font-size: 0.875em;"> {{ comment.userName||comment.name }}</div>
                    <div style="font-size: 0.75em; line-height: 1em;">{{ comment.time }}</div>
                </div>
                <div style="margin-top: 0.5em;">{{ comment.content }}</div>
                <div style="display: flex; margin-top: 0.5em; align-items: center; gap: 0.9em;"><span><span style="color: black;" :class="'heart'+comment.id" @click.self="handleClick(comment.id)">♥ </span> 点赞</span>
                    <i class="el-icon-chat-dot-round" style="cursor: pointer;" @click="handle(index)"></i><span style="margin-left: -10px;">回复</span></div>
                    <formView :commentId="comment.id" v-if="activeIndex==index" @load="handleLoad"  ></formView>
                    <ChildComment :childComments="comment.child" :parentComment="comment" v-if="comment.child!=null" @load="handleLoad"></ChildComment>
            </div>
            
        </div>
    </div>
    </div>
</template>
<script>
import ChildComment from './childComment.vue';
import formView from './formView.vue';

     
      export default{
        components:{
            formView,
            ChildComment
        },
        props: {
            commentList:Array
        },
        name:'commentVue',
        data(){
            return{
                heart:{color:''},
                show:false,
                activeIndex:null,
                isStar:false,
            } 
        },
        methods:{
            handleClick(id){
                if(document.querySelector('.heart'+id).style.color=='black'){
                    document.querySelector('.heart'+id).style.color='red'
                }
                else{
                    document.querySelector('.heart'+id).style.color='black'
                }
			},

            getCommentList(){

            },
            handleLoad(){
                this.$emit('load');
                this.activeIndex=null
            },
            handle(index){
                if(this.activeIndex==index){
                    this.activeIndex=null
                }
                else{
                    this.activeIndex=index
                }
            },
        },
        created(){
            this.item= this.commentList.map(() => {
                    return {
                            style: {color:'black'},
                            isStar: false
                    };
                })
        }

    }
</script>

<style>


</style>